<template>
  <div class="container">
    <header class="header"></header>
    <div class="content">
      <div class="user">
        <img src="../../../public/img/tou.jpg" alt="">
        <div>
          <p>我的名字</p>
          <span>开通会员</span>
          <span>申请认证</span>
        </div>
      </div>
      <ul class="menu">
        <li>美食记</li>
        <li>菜谱</li>
        <li>关注</li>
      </ul>
      <div class="carts">
        <ul>
          <li>我的订单</li>
          <li>我的订单</li>
          <li>我的订单</li>
          <li>我的订单</li>
          <li>我的订单</li>
          <li>我的订单</li>
        </ul>
      </div>
    </div>
  </div>
</template>
	
<style lang="scss" scoped>
@import "@/lib/reset.scss";

.container {
	@include rect(100%,100%);
	@include overflow(auto);
	.header {
		@include flexbox();
		@include justify-content();
		@include align-items();
	}	
	.content {
		@include overflow(auto);
    @include flexbox();
    .user {
      @include flexbox();
      @include justify-content();
      img {
        @include rect(0.6rem,0.6rem);
        border-radius: 50%;
      }
      div {
        margin-left: 0.2rem;
        p {
          @include font-size(.18rem);
          margin-bottom: 0.1rem
        }
        span {
          border: 0.01rem solid #f1f1f1;
          margin-right: 0.1rem;
        }
      }
    }
    .menu {
      @include flexbox();
      @include justify-content(space-around);
      border-bottom: 0.01rem solid #000;
      padding-top: 0.3rem;
      li {
        @include font-size(.16rem);
      }
    }
    .carts {
      margin-top: 0.3rem;
      ul {
        @include flexbox();
        @include flex-direction(column);
        margin-left: 0.1rem;
        li {
          @include font-size(.16rem);
          margin-bottom: 0.2rem ;
        }
      }
    }
  }
}  
</style>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      loginState: ({ user: { loginState } }) => loginState
    })
  },
  methods: {
    login () {
      this.$store.dispatch('user/login')
    }
  }
}
</script>